import React from "react";
import {Link} from "react-router";
class ShopName extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        let {shopNames, shopNo} = this.props;
        let categoryWidth = shopNames.length * 120 + 'px';
        //alert("shopNo:" + shopNo);
        if (shopNames.length > 1) {
            return (
                <div className="shop-name-container-outer">
                    <div className="shop-name-container" style={{width: categoryWidth}}>
                        {
                            shopNames.map((item, index) => {
                                let className = ((index == 0 && shopNo == 0) || item.shopNo == shopNo) ? 'curr' : '';
                                return (
                                    <Link className={className} key={index}
                                          onClick={this._shopNameOnClick.bind(this, item.shopNo)}>{item.shopName}</Link>
                                );
                            })
                        }
                    </div>
                </div>
            );
        } else {
            return (<div></div>);
        }
    }

    _shopNameOnClick(shopNo) {
        this.props.fetchDataByShopId(shopNo);
    }
}

export default ShopName;